<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05.ajax的get请求参数</title>
</head>

<body>
    <button id="btnNode">发送post请求</button>

    <h1>原来的数据</h1>

    <script>

        // ajax({
        //     url:"xxxx",
        //     type:"get",
        //     async:true,
        //     contentType:"",
        //     data:{},
        //     dataType:"json",
        //     success:function(value) {

        //     }
        // })
        btnNode.onclick = function () {

            // 1 创建ajax 的对象
            var xhr = new XMLHttpRequest()
 
            // 2 发送ajax 请求
            // 2.1 准备发送
            // get 请求发送参数直接写在url上
            xhr.open("POST", "https://httpbin.org/post", true);
           // 设置请求头类型  默认的请求头就是 application/json
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
            // 2.2 直接发送  post请求  参数写在send中  key=value
            xhr.send("username=admin&password=123")

            // 3 得到响应解析数据
            // 3.1 进行监听操作 操作ajax的变化
            xhr.onreadystatechange = function (e) {

                if (xhr.readyState === 4 && xhr.status === 200) {
                    // 获取响应数据
                    var value = xhr.responseText
                    console.log(value);
                    // textNode.innerText=value;
                }


            }



        }
    </script>

</body>

</html>